<template>
	<div class="schedule">
		<h2 class="schedule-plan">行程安排</h2>
		<ul class="schedule-list">
			<li v-for="(item, index) in getBaseMsg.plan">{{item}}</li>
		</ul>
		<div class="schedule-itinerary">
			<h3 class="schedule-specific-itinerary">具体行程</h3>
			<ul class="schedule-itinerary-details">
				<li class="schedule-itinerary-details-item" v-for="(item, index) in getBaseMsg.scheduleDetail">
					<span class="schedule-itinerary-details-timeline">{{item.time}}</span>
					<div :class="{'schedule-itinerary-details-content': index !== getBaseMsg.scheduleDetail.length - 1}">
						<div class="schedule-itinerary-details-title">
							<h3>{{item.abstract}}</h3>
							<h3 class="schedule-itinerary-details-attractions" v-show="item.attractions">
							{{item.attractions}}
							</h3>
							<div class="schedule-itinerary-details-star" v-if="item.HwangjedoStar">
								<img src="../../assets/img/HighlightStar@2x.png">
								<img src="../../assets/img/HighlightStar@2x.png">
								<img src="../../assets/img/HighlightStar@2x.png">
								<img src="../../assets/img/HighlightStar@2x.png">
								<img src="../../assets/img/GrayStar@2x.png">
							</div>
							<div class="schedule-itinerary-details-star" v-if="item.IslandStar">
								<img src="../../assets/img/HighlightStar@2x.png">
								<img src="../../assets/img/HighlightStar@2x.png">
								<img src="../../assets/img/HighlightStar@2x.png">
								<img src="../../assets/img/HighlightStar@2x.png">
								<img src="../../assets/img/GrayStar@2x.png">
							</div>
						</div>
						<div class="schedule-itinerary-details-img" v-if="item.HwangjedoImg">
							<img src="../../assets/img/Hwangjedo.jpg">
							<img src="../../assets/img/swim.jpg">
						</div>
						<div class="schedule-itinerary-details-img" v-if="item.IslandImg">
							<img src="../../assets/img/Island.jpeg">
						</div>
						<div class="schedule-itinerary-details-description">
							<h3 v-if="item.detail">{{item.detail}}</h3>
							<p class="multi-line-omitted" v-if="item.description">{{item.description}}</p>
						</div>		
						<span class="schedule-itinerary-details-time">{{item.totalTime}}</span>
					</div>
				</li>
			</ul>
		</div>
		<h3 class="schedule-additional-services">附加服务</h3>
		<div class="schedule-services-item">
			<div class="schedule-services-item-list"  v-for="(item, index) in getBaseMsg.additionalServices">
				<p class="schedule-services-item-title">{{item.servicesTitle}}</p>
				<p class="schedule-services-item-detail">{{item.servicesDetail}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default{
		name: "schedule",
		computed: {
  		...mapGetters([
      	'getBaseMsg'
    	])
 	  }
	}
</script>

<style scoped lang="scss">
	$verticalDistance: 1rem;
	$horizontalDistance: 1.63rem;
	.schedule{
		border-bottom: $verticalDistance solid rgb(240, 240,240);
		.schedule-plan{
			font-family: ".PingFang-SC-Semibold";
			font-size: 1.36rem;
			color: #333;
			letter-spacing: 0;
			border-top: $verticalDistance solid rgb(240, 240,240);
			border-bottom: 1px solid rgb(240, 240,240);
			padding: $verticalDistance 0 $verticalDistance $horizontalDistance;
		}
		.schedule-list{
			margin: $verticalDistance $horizontalDistance;
			padding: 2rem 0 2rem 2em;
			background: #FFF6F4;
			font-family: "PingFangSC-Regular";
			font-size: 1.28rem;
			color: #333;
			line-height: 2rem;
			li::before {
			  content: "• ";
			  color: rgba(255,102,51,0.50);
			  font-size: 2rem;
			}
		}
		.schedule-additional-services{
			font-family: "PingFangSC-Medium";
			font-size: 1.28rem;
			color: #333;
			letter-spacing: 0;
			line-height: 1.28rem;
			margin-left: $horizontalDistance;
			border-top: 1px solid #E1E1E1;
			padding: 1.6rem 0;
		}
		.schedule-services-item{
			display: grid;
		  grid-template-row: auto;
		  grid-template-columns: repeat(3, 33.3%);
		  margin: 0 $horizontalDistance 1.6rem $horizontalDistance;
		  background: #F8F8F8;
		  text-align: center;
		  font-family: "PingFangSC-Medium";
			font-size: 1.28rem;
			letter-spacing: 0;
			.schedule-services-item-list{
				padding: 1.6rem 0;
				line-height: 1.6rem;
			}
			.schedule-services-item-list:nth-child(3n+2){
				border-left: 1px solid #eee;
				border-right: 1px solid #eee;
			}
			.schedule-services-item-list:nth-last-child(n+4){ /*匹配倒数第四个以及第四个之前的元素*/
				border-bottom: 1px solid #eee;
			}
			.schedule-services-item-title{
				color: #999;
			}
			.schedule-services-item-detail{
				color: #666;
			}
		}
		.schedule-itinerary{
			margin: $verticalDistance $horizontalDistance;
			.schedule-specific-itinerary{
				font-family: PingFangSC-Medium;
				font-size: 1.28rem;
				color: #333;
				letter-spacing: 0;
				line-height: 1.36rem;
				margin-bottom: $verticalDistance;
			}
			.schedule-itinerary-details-item{
				display: -webkit-flex;
		    display: -ms-flexbox;
		    display: flex;
		    flex-direction: row;
		  	position: relative;
		  	margin-bottom: 1.6rem;  /*和时间的那个icon长度相抵*/
				.schedule-itinerary-details-timeline{
					opacity: 0.8;
					background: #FF6633;
					border-radius: 1.9rem;
					font-family: ".PingFang-SC-Regular";
					font-size: 1.1rem;
					color: #FFF;
					letter-spacing: 0;
					padding: 0 .6rem;
					height: 1.6rem;
					line-height: 1.6rem;
					text-align: center;
					margin-right: 1rem;
				}
				.schedule-itinerary-details-content{
					&:before{
						content: '';
						display: block;
						width: 0.2rem;
						height: 100%;
						background: #E1E1E1;
						position: absolute;
						left: $horizontalDistance;
						top: 1.6rem;  /*和时间的那个icon长度相抵*/
					}
				}			
				.schedule-itinerary-details-title{
					font-family: "PingFangSC-Medium";
					font-size: 1.28rem;
					color: #333;
					letter-spacing: 0;
					line-height: 1.5rem;
					display: -webkit-flex;
	    		display: -ms-flexbox;
					display: flex;
					.schedule-itinerary-details-attractions{
						color: rgb(67,103,136);
						margin-right: .5rem;
					}
				}
				.schedule-itinerary-details-img{
					height: 8rem;
					display: -webkit-flex;
	    		display: -ms-flexbox;
					display: flex;
					justify-content: space-between;
					margin: 1rem 0 .6rem 0;
			    img{
			    	width: 48%;
			    	height: 100%;
			    }
				}
				.schedule-itinerary-details-description{
					font-family: ".PingFang-SC-Regular";
					font-size: 1.3rem;
					color: #666;
					letter-spacing: 0;
					line-height: 2rem;
					h3{
						color: #333;
					}
					p{
						padding: .5rem 0;
					}
				}
				.schedule-itinerary-details-time{
					font-family: ".PingFang-SC-Regular";
					font-size: 1.1rem;
					color: #999;
					letter-spacing: 0;
					line-height: 1.1rem;
				}
			}
		}
	}
	
</style>